import React, { PureComponent } from 'react';
import './ContentList.scss'
import { getListData } from '../../actions/contentListAction';
import ListItem from 'components/ListItem/ListItem'
import ScrollView from 'components/ScrollView/ScrollView'
import { connect } from 'react-redux'

class ContentList extends PureComponent {
  constructor(props) {
    super(props);

    // 记录当前页码
    this.page = 0;

    // 请求第一屏数据
    this.fetchData(this.page);

    // 标识页面是否可以滚动
    this.state = {
      isend: false
    };

  }

  fetchData (page) {
    this.props.dispatch(getListData(page));

  }

  onLoadPage () {
    this.page++;
    // 最多滚动3页3次
    if (this.page > 3) {
      this.setState({
        isend: true
      });
    } else {
      this.fetchData(this.page);
    }
  }

  renderItems () {
    let list = this.props.list;
    return list.map((item, index) => {
      return <ListItem key={index} itemData={item}></ListItem>
    });
  }

  render () {
    return (
      <div className="list-content">
        <h4 className="list-title">
          <span className="title-line"></span>
          <span>附近商家</span>
          <span className="title-line"></span>
        </h4>
        <ScrollView dis="content" loadCallback={this.onLoadPage.bind(this)} isend={this.state.isend}>
          {this.renderItems()}
        </ScrollView>
      </div>
    );
  }
}

export default connect(
  state => {
    return {
      list: state.contentList.list
    }
  }
)(ContentList);
